<template>
  <el-card class="preview" v-if="info.isPreview">
    <div class="container-header">
      <h4>
        {{ info.title }}
      </h4>
      <div style="margin-bottom: 10px">交流时间：{{ info.occurrenceTime }}</div>
      <div style="margin-bottom: 10px">参与单位：{{ info.attendDept }}</div>
      <div style="margin-bottom: 10px">参与人员：{{ info.attendMenber }}</div>
      <!-- <p>发布时间:{{ info.createTime }}&nbsp;{{ info.createUserName }}</p> -->
    </div>
    <div style="border-top: 1px solid #ddd">
      <div style="margin-top: 10px" v-highlight v-html="info.content"></div>
      <div class="download-info" v-if="info.attachmentArr.length > 0">
        <h5>附件</h5>
        <el-link
          class="file-css"
          v-for="(item, index) in info.attachmentArr"
          :disabled="!info.isDownload"
          :key="index"
          icon="el-icon-folder"
          @click.prevent="preview(item)"
        >
          {{ item.fileName }}
        </el-link>
      </div>
    </div>
  </el-card>
  <el-card class="preview" v-else>
    <div class="container-header">
      <h4>
        {{ info.title }}
      </h4>
      <p>发布时间:{{ info.createTime }}&nbsp;{{ info.createUserName }}</p>
    </div>

    <div class="summary">{{info.summary}}</div>

    <div>
      <div v-highlight v-html="info.content" class="editor-content-view"></div>
      <div class="download-info" v-if="info.attachmentArr.length > 0">
        <h5>附件</h5>
        <el-link
          class="file-css"
          v-for="(item, index) in info.attachmentArr"
          :disabled="!info.isDownload"
          :key="index"
          icon="el-icon-folder"
          @click.prevent="preview(item)"
        >
          {{ item.fileName }}
        </el-link>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
//引入样式
import "highlight.js/styles/monokai-sublime.css";
// import "highlight.js/styles/default.css";

import { postInfoManageInfo } from "/@/api/information";
import { postCommunicateInfo } from "/@/api/communicate";
// import { useUpload } from "../hooks";
const route = useRoute();

let info = reactive({
  isPreview: false,
  title: "",
  summary: "",
  content: "",
  createTime: "",
  createUserName: "",
  isDownload: false,
  attachmentArr: [],
  occurrenceTime: "",
  attendMenber: "",
  attendDept: ""
});

// const { handleDownload } = useUpload();
const preview = (item: any) => {
  window.open(
    `${location.origin}${location.pathname}#/online?uuidFile=${item.uuidFile}&fileName=${item.fileName}`
  );
};
const initGetData = async () => {
  try {
    const params = {
      id: route.query?.id ?? ""
    };
    const { code, data } = await postInfoManageInfo(params);
    console.log(data);
    if (code === 200) {
      const {
        title,
        summary,
        content,
        createTime,
        createUserName,
        authorityScop,
        attachmentArr
      } = data;
      info.title = title;
      info.summary = summary;
      info.content = content;
      info.createTime = createTime;
      info.createUserName = createUserName;
      info.isDownload =
        authorityScop.indexOf("D") !== -1 || authorityScop.indexOf("A") !== -1
          ? true
          : false;
      info.attachmentArr = attachmentArr || [];
      // const newContent = info.content.replace(/<pre>/g, "<pre class='hljs'>");
      // info.content = hljs.highlightAuto(newContent).value;
      // info.content = newContent;
      // info.content = marked(content, { breaks: true }).replace(
      //   /<pre>/g,
      //   "<pre class='hljs'>"
      // );
    }
  } catch (err) {
    console.log(err);
  }
};

const getData = async () => {
  const params = {
    id: route.query?.id ?? ""
  };
  const data = await postCommunicateInfo(params);
  const {
    title,
    summary,
    authorityScop,
    attachmentArr,
    occurrenceTime,
    attendMenber,
    attendDept
  } = data.data;
  info.title = title;
  info.attendMenber = attendMenber;
  info.occurrenceTime = occurrenceTime.replace(" 00:00:00", "");
  info.content = summary;
  info.attendDept = attendDept;
  // info.createTime = createTime;
  // info.createUserName = createUserName;
  info.isDownload =
    authorityScop.indexOf("D") !== -1 || authorityScop.indexOf("A") !== -1
      ? true
      : false;
  info.attachmentArr = attachmentArr || [];
};

onMounted(async () => {
  if (route.query.index === "0") {
    info.isPreview = true;
    await getData();
  } else {
    await initGetData();
  }
  // marked.setOptions({
  //   renderer: new marked.Renderer(),
  //   highlight: function (code) {
  //     return hljs.highlightAuto(code).value;
  //   },
  //   pedantic: false,
  //   gfm: true,
  //   // tables: true,
  //   breaks: true,
  //   sanitize: false,
  //   smartLists: true,
  //   smartypants: false,
  //   xhtml: true
  // });
});
</script>

<style lang="scss" scoped>
.preview {
  height: calc(100vh - 132px);
  overflow: auto;
  padding-left: 12px;
  padding-right: 12px;
}

.container-header {
  h4,
  p {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.summary{
  padding: 20px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(51,51,51,0.2);
  color: #666;
}
.download-info {
  text-align: left;
}
.file-css {
  display: block;
  margin-bottom: 5px;
  &:hover:after {
    display: none;
  }
}
</style>
